<template>
  <!-- 充电站管理 - 充电桩管理 -->
  <!-- 选择框 -->
  <el-card>
    <el-select style="width: 300px" placeholder="选择站点名称" v-model="value" filterable>
      <!-- 根据后端返回的数据动态渲染option -->
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.name"
      />
    </el-select>
  </el-card>

  <!-- 按钮组 -->
  <el-card class="mt">
    <el-radio-group size="large" v-model="radio" @change="handleChange">
      <el-radio-button :label="`全部(${allCount})`" :value="0" />
      <el-radio-button :label="`空闲中(${checkCount(1)})`" :value="1" />
      <el-radio-button :label="`充电中(${checkCount(2)})`" :value="2" />
      <el-radio-button :label="`连接中(${checkCount(3)})`" :value="3" />
      <el-radio-button :label="`排队中(${checkCount(4)})`" :value="4" />
      <el-radio-button :label="`已预约(${checkCount(5)})`" :value="5" />
      <el-radio-button :label="`故障/离线(${checkCount(6)})`" :value="6" />
    </el-radio-group>
  </el-card>

  <!-- 充电桩容器 -->
  <el-card class="mt">
    <el-row :gutter="20">
      <!-- 循环项 -->
      <el-col :span="6" v-for="item in dataListCopy" :key="item.id">
        <!-- 上层 -->
        <div class="item">
          <!-- 左侧 -->
          <div class="pic">
            <p v-if="item.status === 1">空闲中</p>
            <p v-else-if="item.status === 2">充电中</p>
            <p v-else-if="item.status === 3">连接中</p>
            <p v-else-if="item.status === 4">排队中</p>
            <p v-else-if="item.status === 5">已预约</p>
            <p v-else-if="item.status === 6">故障/离线</p>
            <img
              :src="item.status == 1 ? free : item.status == 6 ? outline : ing"
              width="100px"
            />
            <!-- 充电桩百分比 -->
            <p v-if="item.status == 2">{{ item.percent }}</p>
            <p v-else>0%</p>
          </div>

          <!-- 右侧 -->
          <div class="info">
            <h3>{{ item.id }}</h3>
            <hr class="mb" />
            <p>电压:{{ item.voltage }}</p>
            <p>电流:{{ item.current }}</p>
            <p>功率:{{ item.power }}</p>
            <p>温度:{{ item.tem }}</p>
          </div>
        </div>

        <!-- 下层 -->
        <div class="btn">
          <div class="divder"></div>
          <div class="btn-info">
            <p class="fl ml" style="font-size: 12px; color: #999">暂无预警</p>

            <!-- 维保记录 - Popover 弹出框 + Timeline 时间线组件 -->
            <div class="fr" style="text-align: right">
              <el-popover placement="left" :width="400" trigger="click">
                <template #reference>
                  <el-button size="small">维保记录</el-button>
                </template>
                <h3 class="mb">维保记录</h3>
                <el-timeline style="max-width: 600px">
                  <el-timeline-item timestamp="12:08:17">
                    充电80度,消费80元
                  </el-timeline-item>

                  <el-timeline-item timestamp="13:12:09">
                    充电50度,消费5日元
                  </el-timeline-item>

                  <el-timeline-item timestamp="13:15:22">
                    充电6日度口消费60元
                  </el-timeline-item>

                  <el-timeline-item timestamp="16:22:33">
                    充电7日度,消费70元
                  </el-timeline-item>

                  <el-timeline-item timestamp="17:27:17">
                    充电100度,消费100元
                  </el-timeline-item>

                  <el-timeline-item timestamp="18:08:33">
                    充电80度,消费80元
                  </el-timeline-item>
                </el-timeline>
              </el-popover>

              <!-- 使用记录 - Popover 弹出框 + Timeline 时间线组件 -->
              <el-popover placement="right" :width="400" trigger="click">
                <template #reference>
                  <el-button size="small" type="primary" class="mr">使用记录</el-button>
                </template>
                <h3 class="mb">使用记录</h3>
                <el-timeline style="max-width: 600px">
                  <el-timeline-item timestamp="12:08:17">
                    充电80度,消费80元
                  </el-timeline-item>

                  <el-timeline-item timestamp="13:12:09">
                    充电50度,消费5日元
                  </el-timeline-item>

                  <el-timeline-item timestamp="13:15:22">
                    充电6日度口消费60元
                  </el-timeline-item>

                  <el-timeline-item timestamp="16:22:33">
                    充电7日度,消费70元
                  </el-timeline-item>

                  <el-timeline-item timestamp="17:27:17">
                    充电100度,消费100元
                  </el-timeline-item>

                  <el-timeline-item timestamp="18:08:33">
                    充电80度,消费80元
                  </el-timeline-item>
                </el-timeline>
              </el-popover>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import free from "@/assets/free.png";
import outline from "@/assets/outline.png";
import ing from "@/assets/ing.png";
import { computed, onMounted, ref, watch } from "vue";
import { chargingPileListApi } from "@/api/chargingstation";

// 声明充电桩列表数据,用于下拉框和模糊查询
const options = ref<any>([]);
// 声明充电桩列表数据,在按钮组中使用,跟据按钮组的值来展示不同的充电桩状态,跟模糊查询的值分开
const dataList = ref<any>([]);
// 备份dataList,用于按钮组的切换
const dataListCopy = ref<any>([]);

// 创建获取充电桩列表数据的方法
const loadData = async () => {
  // 调用充电桩列表接口,并获得返回的数据
  const { data } = await chargingPileListApi();
  // 将返回的数据赋值给options
  options.value = data;
  dataList.value = data[0].list; // 将数据赋值给dataList,用于按钮组的展示,他是原始数据,保持不动
  dataListCopy.value = data[0].list; // 备份dataList,做列表渲染
};
// 在组件挂载时调用loadData方法
onMounted(() => {
  loadData();
});

const value = ref<string>(""); // 站点选择框的值

const radio = ref<number>(0); // 按钮组的值

// 封装一个函数,用于展示按钮组分别对应的个数
const checkCount = (num: number) => {
  return dataList.value.filter((item: any) => item.status === num).length;
};
// 计算属性,用于展示全部按钮对应的个数
const allCount = computed(
  () =>
    checkCount(1) +
    checkCount(2) +
    checkCount(3) +
    checkCount(4) +
    checkCount(5) +
    checkCount(6)
);

// 按钮组值改变时触发的方法
const handleChange = () => {
  // 先将dataListCopy重置为原始数据
  dataListCopy.value = dataList.value;
  // 根据按钮组的值来过滤ddataListCopy的数据
  if (radio.value !== 0) {
    dataListCopy.value = dataListCopy.value.filter(
      (item: any) => item.status === radio.value
    );
  }
};

// 模糊查询的筛选功能
watch(value, () => {
  // 先拿到查询的充电桩数据
  const selected = options.value.find((item: any) => item.name === value.value);

  // 修改dataListCopy的值,用于列表的渲染
  dataListCopy.value = selected.list;
  // 也要修改原始数据的值,用于按钮组的筛选
  dataList.value = selected.list;
  // 重置按钮组里(全部)的值为0
  radio.value = 0;
});
</script>

<style scoped lang="less">
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-color: rgb(247, 251, 254);
  padding: 20px;
  border-radius: 10px 10px 0 0;
  margin-top: 20px;
  .pic {
    p {
      width: 76px;
      text-align: center;
      margin-bottom: 10px;
      color: rgb(61, 187, 146);
    }
  }

  .info {
    color: #999;
    margin-left: 30px;
    line-height: 26px;
    margin-top: -20px;
  }
}

.btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #f7fbfe;

  .divder {
    width: 95%;
    height: 2px;
    background-color: #f4f4f4;
    margin: auto;
  }
}
</style>
